<script setup>
	import $http from '@/utils/http'
	import { ref, onMounted, onUpdated, nextTick, getCurrentInstance } from 'vue'
	import { getClientHeight } from '@/utils/pkg'
	import { useToast } from 'wot-design-uni'
	import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { useLivePusherStoreHook } from '@/stores/modules/livePusher'
	import { useUserStoreHook } from '@/stores/modules/user'
	import {
		AlreadySetJoin,
		LiveBroadcastList,
		NewLiveBroadcast,
		LeaveRoomExit,
		LeaveRoomExitAll,
		GroupList,
	} from '@/socket/eventSocket'
	
	import openLivePusherIcon from '@/static/icon/live-pusher/open_live_pusher_icon.png'
	
	const toast = useToast()
	const instance = getCurrentInstance()
	const useUserStore = useUserStoreHook()
	const useLivePusherStore = useLivePusherStoreHook()
	const platform = ref(0)
	const current = ref(0)
	const swiperList = ref([
	  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
	  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
	  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
	])
	const menuList = ref([
		{ text: '开播', icon: openLivePusherIcon },
		{ text: '开播', icon: openLivePusherIcon },
		{ text: '开播', icon: openLivePusherIcon },
		{ text: '开播', icon: openLivePusherIcon },
	])
	const openLiveBroadcadcast = ref([])
	
	// 获取自己的直播间
	const init = async () => {
		await getLivePusherRoom()
		await getIngLivePusherRoom()
		openLiveBroadcadcast.value = useLivePusherStore.openLiveBroadcastList
		console.log(openLiveBroadcadcast.value)
	}
	
	// 创建后重新在获取自己直播间
	const getLivePusherRoom = async () => {
		const res = await $http.request({
			url: `/get-live-pusher-room-id?user_id=${useUserStore.userinfo.id}`,
			method: 'GET',
			header: {
				token: true
			}
		})
		if(res.code !== 200) {
			toast.show({
				position: 'bottom',
				msg: res.msg
			})
			return
		}
		useLivePusherStore.SET_LIVE_BROADCAST(res.data)
	}
	
	// 创建后重新在获取自己直播间
	const getIngLivePusherRoom = async () => {
		const res = await $http.request({
			url: `/get-ing-live-pusher-room`,
			method: 'GET',
			header: {
				token: true
			}
		})
		if(res.code !== 200) {
			toast.show({
				position: 'bottom',
				msg: res.msg
			})
			return
		}
		if(res.data.length < 1) { return }
		useLivePusherStore.SET_OPEN_LIVE_BROADCAST_LIST(res.data)
	}
	
	// 点击的轮播图
	const handleClick = (e) => {
	  // console.log(e)
	}
	
	// 切换的轮播
	const onChange = (e) => {
	  // console.log(e)
	}
	
	// 跳转直播
	const livePusher = (itme, index) => {
		console.log(itme, index)
		if(!useUserStore.userinfo.account) {
			uni.navigateTo({
				url: `/pages/login/login`
			});
			return
		}
		
		if(index === 0) {
			uni.navigateTo({
				url: `/pages/open-live-broadcast-page/open-live-broadcast-page`
			});
		}

	}
	
	// 滑动到底部
	onReachBottom(() => {
		
	})
	
	// 下拉触发
	onPullDownRefresh(() => {
		uni.reLaunch({
		    url: `/pages/live-pusher-page/live-pusher-page`
		})
		uni.stopPullDownRefresh()
	})
	
	// 点击观看直播
	const seeLiveBroadcadcast = (itme) => {
		uni.navigateTo({
		  url: `/pages/see-live-broadcadcast/see-live-broadcadcast?seeUser=${JSON.stringify(itme)}`
		})
	}
	
	// 监听连接获取正在直播的直播间
	LiveBroadcastList((data) => {
		console.log('监听连接获取正在直播的直播间:', data)
		useLivePusherStore.SET_OPEN_LIVE_BROADCAST_LIST(data)
	})
	
	// 新开的直播
	NewLiveBroadcast((data) => {
		useLivePusherStore.SET_NEW_LIVE_BROADCAST(JSON.parse(data.data))
	})
	
	// 监听新的直播开启
	GroupList((data) => {
		console.log('监听新的直播开启: ', data)
		openLiveBroadcadcast.value = useLivePusherStore.openLiveBroadcastList
		console.log(useLivePusherStore.openLiveBroadcastList)
	})
	
	// 广播关闭的直播事件监听
	LeaveRoomExitAll((data) => {
		console.log('广播关闭直播: ', data)
		useLivePusherStore.STOP_LIVE_BROADCAST(data.live_broadcast_room)
		const delRoom = openLiveBroadcadcast.value.filter(item => item.live_broadcast_room !== data.live_broadcast_room);
		openLiveBroadcadcast.value = delRoom
	})
	
	// 获取元素高度
	const getDom = () => {
		if(useLivePusherStore.openLiveBroadcastList.length === 0) { return }
		nextTick(() => {
			setTimeout(() => {
					let query = uni.createSelectorQuery().in(instance.proxy);
					for(let i = 0; i < openLiveBroadcadcast.value.length; i++) {
						query.select('.get-el'+i).boundingClientRect(data => {
							if (data) {
								openLiveBroadcadcast.value[i].height = Math.ceil((data.height / 5))
							}
						}).exec();
					}
				}, 500)
		})
	}
	
	onMounted(() => {
		platform.value = getClientHeight()
		getDom()
	})
	
	onShow(() => {
		init()
	})
</script>

<template>
	<view class="newget-page" :style="`padding-top: ${platform}rpx;`">
		<view class="swiper-box">
			<wd-swiper :list="swiperList" autoplay v-model:current="current" @click="handleClick" @change="onChange"></wd-swiper>
		</view>
		<view>
		<view class="menu-box">
			<view
				class="menu-list"
				:key="index"
				@click="livePusher(itme, index)"
				v-for="(itme, index) in menuList">
				<image class="menu-list-img" :src="itme.icon"></image>
				<text class="menu-list-text">{{ itme.text }}</text>
			</view>
		</view>
		</view>
		<view class="live-pusher-liat">
			<view
				v-for="(itme, index) in openLiveBroadcadcast"
				:key="index"
				@click="seeLiveBroadcadcast(itme)"
				:style="`grid-row-end: span ${itme.height};`"
				:class="`live-pusher-itme get-el${index}`">
				<image class="itme-img" :src="itme.live_broadcast_poster" mode="widthFix"></image>
				<view class="itme-text">
					<view class="user-mag">
						<text class="user-nickname">{{ itme.nickname }}</text>
						<text class="user-room">{{ itme.live_broadcast_room }}</text>
						<text class="live-pusher">{{ itme.live_broadcast_name }}</text>
					</view>
					<view class="live-pusher-animation">
						<view class="animation-icon">直播中</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.newget-page {
	.menu-box {
		width: 100%;
		height: 120rpx;
		border-bottom: 2rpx solid #5A5C61;
		
		display: flex;
		align-items: center;
		justify-content: space-around;
		
		.menu-list {
			width: 130rpx;
			height: 90%;
			
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			
			.menu-list-img {
				width: 70rpx;
				height: 70rpx;
			}
			.menu-list-text {
				color: #dddddd;
				font-size: 24rpx;
			}
		}
	}
	
	.swiper-box {
		.swiper {
			width: 100%;
			.swiper-item {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.live-pusher-liat {
		width: 100%;
		padding-top: 10rpx;
		
		display: grid;
		grid-auto-rows: 5px;
		grid-template-columns: repeat(auto-fill, calc(50% - 5px));
		align-items: start;
		justify-content: space-around;
		
		.live-pusher-itme {
			width: 100%;
			border-radius: 10rpx;
			position: relative;
			
			.itme-img {
				width: 100%;
				border-radius: 10rpx;
			}
			.itme-text {
				width: 100%;
				height: 80rpx;
				padding: 0 5rpx;
				box-sizing: border-box;
				background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));
				
				z-index: 100;
				bottom: 8rpx;
				position: absolute;
				
				display: flex;
				align-items: center;
				
				.user-avatar-box {
					width: 50rpx;
					height: 50rpx;
					.user-avatar {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}
				}
				
				.user-mag {
					width: 100%;
					height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					
					display: flex;
					flex-direction: column;
					
					.user-nickname,
					.user-room,
					.live-pusher {
						width: 230rpx;
						display: block;
						margin: -3rpx 0;
						font-size: 19rpx;
						text-shadow: 0 0 2px #000000;
						
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					
					.user-nickname {
						color: #DDDDDD;
					}
					.user-room {
						color: #DDDDDD;
					}
					.live-pusher {
						color: #94969A;
					}
				}
				
				.live-pusher-animation {
					width: 120rpx;
					height: 50rpx;
					
					display: flex;
					align-items: center;
					justify-content: center;
					
					.animation-icon {
						color: #FF3800;
						font-size: 16rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
}
</style>
